<template>
    <div class="c-main">
        <div class="c-inner">
            <i-form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
                <Form-item label="课程主题" prop="topic">
                    <h3>{{this.$route.params.topic}}</h3>
                </Form-item>
                <Form-item label="章节标题" prop="title">
                    <i-input v-model="formValidate.title" type="text" style="width:600px" placeholder="给您的课程章节取个霸气的标题呗..."></i-input>
                </Form-item>
                <Form-item label="章节介绍" prop="description">
                    <i-input v-model="formValidate.description" type="textarea" :autosize="{minRows: 5,maxRows: 20}" style="width:600px" placeholder="这个章节您准备讲啥..."></i-input>
                </Form-item>
                <Form-item label="上传视频">
                    <Upload ref="upload" type="drag" v-bind:action="url" style="width:600px" :max-size="81920" :multiple="false" :before-upload="handleBeforeUpload" :on-exceeded-size="handleMaxSize" :format="['mp4','mov','webm']" :on-format-error="handleFormatError" :on-success="handleSuccess" :on-remove="handleRemove" :on-preview="handlePreview">
                        <div style="padding: 20px 0">
                            <Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
                            <p>点击或将mov、MP4、webm格式的视频文件拖拽到这里上传，视频文件大小不要超过80MB，请耐心等待上传进度条消失后再提交数据，谢谢</p>
                        </div>
                    </Upload>
                </Form-item>
                <Form-item>
                    <i-button type="primary" @click="handleSubmit('formValidate')">提交</i-button>
                    <i-button type="ghost" @click="handleReset('formValidate')" style="margin-left: 8px">重置</i-button>
                </Form-item>
            </i-form>
        </div>
    </div>
</template>
<script>
import ChapterAPI from '@/api/knowledge/ChapterAPI';
export default {
    data() {
        return {
            uploadList: [],
            chapterVideoName: '',
            uploadedVideoId: '',
            videoSize: 0,
            videoType: '',
            formValidate: {
                title: '',
                description: ''
            },
            ruleValidate: {
                title: [
                    { required: true, message: '请输入章节标题', trigger: 'blur' }
                ],
                description: [
                    { required: true, message: '请输入章节介绍', trigger: 'blur' },
                    { type: 'string', min: 10, message: '多写一点呗，章节介绍不能少于10个字哈', trigger: 'blur' }
                ]
            }
        }
    },
    computed: {
        "url": function() {
            if (process.env.NODE_ENV === 'development') {
                return '/api/knowledge/file/upload/chapter';
            }
            return '/knowledge/file/upload/chapter';
        }
    },
    methods: {
        handleBeforeUpload() {
            const check = this.uploadList.length < 1;
            if (!check) {
                this.$Notice.warning({
                    title: '一次最多只能上传 1 部视频。'
                });
            }
            return check;
        },
        handleMaxSize(file) {
            this.$Notice.warning({
                title: '超出文件大小限制啦',
                desc: '文件 【' + file.name + '】 太大，不能超过 80M 哦。'
            });
        },
        handleFormatError(file) {
            this.$Notice.warning({
                title: '文件格式不正确哦',
                desc: '文件 【' + file.name + '】 格式不正确，上传mov、MP4、webm视频格式的文件哈。'
            });
        },
        handleSuccess(resp, file) {
            if (this.uploadList.length == 0) {
                this.uploadList.push(file.name);
                this.chapterVideoName = file.name;
                this.uploadedVideoId = resp.chapterDTO.materialAddr;
                this.videoSize = resp.chapterDTO.materialSize;
                this.videoType = resp.chapterDTO.materialType;
            }

        },
        handleRemove(file) {
            const fileList = this.$refs.upload.fileList;
            this.$refs.upload.fileList.splice(fileList.indexOf(file), 1);
            this.uploadList = [];
        },
        handlePreview(file) {
            this.$Notice.info({
                title: ' 文件信息',
                desc: '您选择的文件 【' + file.name + '】 已经成功上传。'
            });
        },
        handleSubmit(name) {
            this.$refs[name].validate((valid) => {
                if (valid) {
                    this.createChapter(name);
                    this.$router.push('/knowledge/course/my/list');
                } else {
                    this.$Message.warning('验证失败!');
                }
            });
        },
        handleReset(name) {
            this.$refs[name].resetFields();
            this.$refs.upload.fileList = [];
            this.uploadList = [];
        },
        createChapter(name) {
            let _this = this;
            let params = [_this.$route.params.courseId, _this.chapterVideoName, _this.videoType, _this.uploadedVideoId, _this.videoSize, _this.formValidate.description, _this.formValidate.title];
            if (_this.uploadList.length == 0) {
                _this.$Message.error("您还没有上传视频文件！");
                return;
            }
            if (this.formValidate.title.length >=64) {
              this.$Message.warning('章节标题不能超过64字');
              return;
            }
            if (this.formValidate.description.length >=256) {
              this.$Message.warning('章节介绍不能超过256字');
              return;
            }
            ChapterAPI.createChapterVideo(params, function(resp) {
                if (resp.code != '0000') {
                    _this.$Message.error(resp.message);
                } else {
                    _this.$Message.success('提交成功!');
                    _this.$refs[name].resetFields();
                    _this.$refs.upload.fileList = [];
                    _this.uploadList = [];
                    _this.$router.push("/know-how/viewCourseList")
                }
            }, function(error) {
                _this.$Message.error("操作失败【" + error + "】");
            });
        }
    }
}
</script>
<style scoped>
.c-main {
    width: 70vw;
    height: auto;
    margin: 0 auto;
}
.c-inner {
    margin: 0 auto;
    padding-top: 10%;
    padding-left: 20%;
}
</style>
